
// 模块函数  -放与nav导航栏和搜索课程相关的所有函数
var initCourseTab = (function (doc) {
    var oNavItemlk = doc.getElementsByClassName('nav-item-lk'),
        data = JSON.parse(doc.getElementById('J-courseData').innerHTML),
        oTpl = doc.getElementById('J-courseItemTpl').innerHTML,
        oCourseList = doc.getElementsByClassName('J-course-list')[0],

        oNavItemlkLen = oNavItemlk.length;

    return {

        // nav绑定点击事件的回调函数

        navclick: function (e) {
            var e = e || window.event,
                tar = e.target || e.srcEvent,
                className = tar.className;

            if (className === 'nav-item-lk') {
                var field = tar.getAttribute('date-type');

                this.changeNav(tar);
                oCourseList.innerHTML = this.makeList(this.filterData(data, field));
            }
        },

        // input搜索框绑定input事件的回调函数
        searchCourse: function (oSearchInput) {
            var val = oSearchInput.value,
                len = val.length,
                searchData = this.fifterSearchData(data, val),
                searchDataLen = searchData.length;

            this.changeNav(oNavItemlk[0]);

            if (len > 0) {
                if (searchDataLen > 0) {
                    oCourseList.innerHTML = this.makeList(searchData);
                } else {
                    oCourseList.innerHTML = '<span>--暂无内容--<span>';
                }
            } else {
                this.initList();
            }

        },

        // 通过搜索框输入内容筛选数据
        fifterSearchData: function (data, val) {
            return data.reduce(function (prev, elem) {
                if (elem.course.indexOf(val) !== -1 || elem.teacher.indexOf(val) !== -1) {
                    prev.push(elem);
                }
                return prev;
            }, []);
        },

        // 通过导航栏标签项筛选数据
        filterData: function (data, val) {
            return data.filter(function (elem) {
                switch (val) {
                    case "all":
                        return true;
                    case "vip":
                        return (elem.is_free == 0);
                    case "free":
                        return (elem.is_free == 1);
                    default:
                        return true;
                }
            });
        },

        // 替换模板中的{{}}为JSON数据
        replceTpl: function (elem) {

            return {
                img: elem.img,
                classes: elem.classes,
                course: elem.course,
                price: elem.is_free === '1' ? '免费' : '￥' + elem.price,
                teacher: elem.teacher
            }

        },
        // 渲染List页面的字符串
        makeList: function (data) {
            var list = '',
                _self = this;

            data.forEach(function (elem) {
                list += oTpl.replace(/{{(.*?)}}/g, function (node, key) {
                    return _self.replceTpl(elem)[key];
                });
            });

            return list;
        },

        // 初始化课程列表
        initList: function () {
            this.changeNav(oNavItemlk[0]);
            oCourseList.innerHTML = this.makeList(this.filterData(data, "all"));
        },

        // 导航栏
        changeNav: function (dom) {
            for (var i = 0; i < oNavItemlkLen; i++) {
                item = oNavItemlk[i];
                item.className = 'nav-item-lk';
            }
            dom.className += ' current';
        }


    };



})(document);


// 主函数
; (function (doc) {
    var oNavList = doc.getElementsByClassName('J-nav-list')[0],
        oSearchInput = document.getElementById('J-input');

    function init() {
        initCourseTab.initList();
        bindEvent();
    }

    function bindEvent() {
        oNavList.addEventListener('click', initCourseTab.navclick.bind(initCourseTab), false);
        oSearchInput.addEventListener('input', initCourseTab.searchCourse.bind(initCourseTab, oSearchInput), false);
    }

    init();

})(document);